<template>
  <el-table-column
    :label="item.label"
    :align="'center'"
    v-for="(item, index) in FilterCustomColList"
    :key="item.id"
  >
    <template v-slot="{ row }">
      <div
        v-if="
          row.fieldValueList &&
          row.fieldValueList[index] &&
          row.fieldValueList[index]['values'] &&
          row.fieldValueList[index]['fieldOutput'] &&
          row.fieldValueList[index]['fieldOutput']['type']
        "
      >
        <el-tooltip
          placement="top"
          v-if="
            row.fieldValueList[index]['fieldOutput']['type'] == 'Accessory' ||
            row.fieldValueList[index]['fieldOutput']['type'] == 'Checkbox'
          "
        >
          <template #content>
            <div
              v-for="(item, index) in filterColData(row.fieldValueList[index])"
              :key="index"
            >
              {{ item }}
            </div>
          </template>
          <div class="overShow">
            {{ $arrTurnStr(filterColData(row.fieldValueList[index]), "item") }}
          </div>
        </el-tooltip>
        <div v-else>
          {{ row.fieldValueList[index]["values"] }}
        </div>
      </div>
    </template>
  </el-table-column>
</template>

<script setup name="ActiveCol">
import { onMounted, watch, computed } from "vue";
const props = defineProps({
  customColList: {
    default: [],
  },
  activeCol: {
    default: [],
  },
  totalCol: {
    default: [],
  },
});
// const FilterCustomColList = computed(() => {
//   return newList;
// });
let FilterCustomColList = ref([]);
watch(
  () => props.totalCol,
  (n) => {
    let newList = props.customColList?.filter((item, index) => {
      let current = n?.find((item2) => item.id == item2.key);
      return current && current.visible;
    });
    FilterCustomColList.value = newList;
  },
  {
    immediate: true,
    deep: true,
  }
);

//千分位分隔符
function comdify(n) {
  if (!n) return n;
  n = n.replaceAll(",", "");
  n = n.replaceAll(/[^0-9,]/g, "");
  let str = n.split(".");
  let re = /\d{1,3}(?=(\d{3})+$)/g;
  let n1 = str[0].replace(re, "$&,");
  return n1;
  // return n = n1
}
//列表解析多选框数据
function filterColData(val) {
  let html = [];
  let list = [];
  props.customColList.map((item) => {
    if (!val.fieldOutput?.id) return;
    if (item.id == val.fieldOutput.id) {
      // console.log(typeof val.values);
      if (val.fieldOutput.type != "Time") {
        if (val.fieldOutput.type == "Checkbox") {
          var reg = /^[0-9,/:-\s]+$/;
          if (reg.test(val.values)) {
            //时间格式
            let str = val.values.replaceAll("-", ".");
            list = [str];
          } else {
            if (typeof JSON.parse(val.values) == "object") {
              list = JSON.parse(val.values);
            } else {
              list = [val.values];
            }
          }
          list?.map((item2) => {
            html.push(item2);
          });
          return;
        } else if (item.thousandsSeparator) {
          html = [comdify(val.values)];
        } else if (val.fieldOutput.type == "Accessory") {
          let list = JSON.parse(val.values);
          html = list?.map((item) => item.fileOriginName);
        } else {
          html = [val.values];
        }
      } else {
        html = [val.values];
      }
    }
  });
  return html;
}
</script>

<style lang="scss" scoped></style>
